<!DOCTYPE html>
<!-- saved from url=(0040)http://weui.shanliwawa.top/demo/js5.html -->
<html class="pixel-ratio-1"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="./js5_files/weui.css">
    <link rel="stylesheet" href="./js5_files/weuix.css">

    <script src="./js5_files/zepto.min.js.下载"></script>
    <script src="./js5_files/zepto.weui.js.下载"></script>
     <script>
         $(function(){

             $('.weui-tab').tab({
                 defaultIndex: 0,
                 activeClass: 'weui-bar__item_on',
                 onToggle: function (index) {
                     if (index > 0) {
                         $.toast(index)
                     }
                 }
             })
         })

     </script>
</head>

<body>
    <div class="page-hd">
        <h1 class="page-hd-title">
            tabbar
        </h1>
        <p class="page-hd-desc">底部工具菜单</p>
    </div>

    <div class="weui-tab tab-bottom" style="height:44px;">
        
        <div class="weui-tab__panel">
               <div class="weui-tab__content" style="display: block; opacity: 1;">中国</div>
            <div class="weui-tab__content" style="opacity: 0; display: none;">日本</div>
            <div class="weui-tab__content" style="opacity: 0; display: none;">美国</div>
            <div class="weui-tab__content" style="opacity: 0; display: none;">法国</div>
        </div>
<!--
        <div class="weui-tabbar">
            <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                    <span style="display: inline-block;position: relative;">
                        <i class="icon icon-27 f27 weui-tabbar__icon"></i>
                        <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
                    </span>
                <p class="weui-tabbar__label">微信</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <i class="icon icon-28 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">通讯录</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                    <span style="display: inline-block;position: relative;">
                        <i class="icon icon-29 f27 weui-tabbar__icon"></i>
                        <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
                    </span>
                <p class="weui-tabbar__label">发现</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <i class="icon icon-30 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label f-green">我</p>
            </a>
        </div>
    </div>
-->

  <div class="weui-tabbar">
    <a href="/mobile" class="weui-tabbar__item weui-bar__item--on">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-shield-check-o"></i>
      </div>
      <p class="weui-tabbar__label">安全常识</p>
    </a>
    <a href="/mobile/study_pre.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-exec"></i>
      </div>
      <p class="weui-tabbar__label">顺序练习</p>
    </a>
    <a href="/mobile/test_pre.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-kaoshi1"></i>
      </div>
      <p class="weui-tabbar__label">模拟考试</p>
    </a>
    <a href="/mobile/my.html" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <i class="iconfont icon-wode"></i>
      </div>
      <p class="weui-tabbar__label">我的</p>
    </a>
  </div>




</body></html>
